<template>
  <view class="work_detail">
    <view class="work_detail-nav" :style="navBarStyle">
      <view class="basic-flex-horizontal work_detail-nav-main" :style="{'width': `calc( 100% - ${viewWidth}px)`}">
        <uni-icons style="margin-left: 20px;" type="left" color="#000000" size="20" @click="$utils.back()"></uni-icons>
        <view class="basic-flex-sb main">
          <view class="basic-flex-horizontal left">
            <image class="avatar" :src="$utils.formatAttachmentUrl(info.avatar)"></image>
            <view class="name">{{ info.nickname || '' }}</view>
          </view>
          <view v-if="info.is_me!==1&&info.is_follow===0" class="basic-flex-center right" @click="followFun(true)">关注+
          </view>
          <view v-if="info.is_me!==1&&info.is_follow===1" class="basic-flex-center right" @click="followFun(false)">
            已关注
          </view>
        </view>
      </view>
    </view>

    <swiper class="work_detail-banner" circular :indicator-dots="true" :autoplay="true" :interval="5000"
            :duration="2000">
      <swiper-item v-for="(item ,index) in info.images_url.split(',')" :key="index">
        <image
            class="work_detail-banner"
            :src="$utils.formatAttachmentUrl(item)"
            @click="$utils.showImageList(info.images_url.split(','),index)"
        ></image>
      </swiper-item>
    </swiper>

    <view class="work_detail-main">

      <view class="basic-flex-sb row_1">
        <view class="basic-flex-horizontal left">
          <view class="price">￥{{ info.price || '' }}</view>
          <view class="day">工期预计{{ info.work_date || 0 }}个工作日</view>
        </view>

        <button class="btn" open-type="share">
          <image class="icon" src="/static/base/icon_3zf.png"></image>
        </button>
      </view>

      <view class="row_2">{{ info.title || '' }}</view>

      <view class="row_3">
        <text>{{ info.desc || '' }}</text>
      </view>

      <view class="row_4">
        {{ info.createtime }}
      </view>


      <view class="basic-flex-horizontal row_input" v-if="!Focus">
        <image class="avatar" :src="$utils.formatAttachmentUrl(info.avatar)"></image>
        <view class="basic-flex-horizontal right">
          <image class="icon" src="/static/base/icon_bj_888.png"></image>
          <input
              class="input"
              placeholder="说点什么.."
              placeholder-style="color: #888888;"
              v-model="content"
              :cursor-spacing="20"
              @confirm="sendOut()"
          />
        </view>
      </view>

      <view class="basic-flex-horizontal row_input row_input-reply" v-if="Focus">
        <image class="avatar" :src="$utils.formatAttachmentUrl(info.avatar)"></image>
        <view class="basic-flex-horizontal right">
          <image class="icon" src="/static/base/icon_bj_888.png"></image>
          <input
              class="input"
              :placeholder="placeholder"
              @focus="inputBindFocus"
              @blur="inputBindBlur"
              placeholder-style="color: #888888;"
              v-model="content"
              :focus="Focus"
              :cursor-spacing="20"
              @confirm="sendOut()"
          />
        </view>
      </view>

      <view class="row_5">评论区({{ info.comments || '' }})</view>

      <view class="row_list">
        <view class="detail_comment_base_item" v-for="(item,index) in dataList" :key="index">
          <view class="body">
            <image class="avatar" :src="$utils.formatAttachmentUrl(item.avatar)"></image>

            <view class="basic-flex-column right">
              <view class="nickname">{{ item.nickname || '' }}</view>
              <view class="content">{{ item.content || '' }}</view>
              <view class="other">
                <view class="time">{{ item.createtimes || '' }}</view>
                <view class="reply" @click="showInput(item)">回复</view>
              </view>
            </view>
          </view>
          <view class="son">
            <view class="detail_comment_base_item" v-for="(sonItem,sonIndex) in item.child.data" :key="sonIndex">
              <view class="body">
                <image class="avatar" :src="$utils.formatAttachmentUrl(sonItem.avatar)"></image>

                <view class="basic-flex-column right">
                  <view class="basic-flex-horizontal nickname">
                    {{ sonItem.nickname || '' }}
                    <text v-if="sonItem.pid!=item.id">回复</text>
                    <view v-if="sonItem.pid!=item.id">{{ sonItem.to_nickname }}</view>
                  </view>
                  <view class="content">{{ sonItem.content || '' }}</view>
                  <view class="other">
                    <view class="time">{{ sonItem.createtimes || '' }}</view>
                    <view class="reply" @click="showInput(sonItem)">回复</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>

    <view class="basic-flex-sb work_detail-bottom">

      <view class="item_1" @click="giveTheThumbsUp">
        <image class="icon" :src="`/static/index/${info.is_praise===0?'icon_3zan.png':'icon_3zan1.png'}`"></image>
        <view class="num">{{ info.praise || 0 }}</view>
      </view>

      <view class="item_1" @click="collectMethod">
        <image class="icon" :src="`/static/index/${info.is_collection===0?'icon_3sc.png':'icon_3sc1.png'}`"></image>
        <view class="num">{{ info.collect || 0 }}</view>
      </view>

      <view class="item_1">
        <image class="icon" src="/static/index/icon_3xx.png"></image>
        <view class="num">{{ info.comments || 0 }}</view>
      </view>

      <image class="item_2" src="/static/index/icon_3gwc.png"></image>

      <view class="basic-flex-center item_3">购买</view>
    </view>

    <uni-popup ref="shoppingPopupRef" type="bottom" borderRadius="20px 20px 0px 0px" background-color="#262626"
               :mask-click="false">
      <view class="work_detail-popup">
        <view class="address">
          
        </view>

      </view>
    </uni-popup>

  </view>
</template>

<script>

import navigationBar from "../configure/mixins/navigationBar";
import page from "../configure/mixins/page";
import {collectWork, comment, getCommentList, getWorkInfo, praise} from "../configure/api/index";
import {addFollow, deleteFollow} from "../configure/api/my";

export default {
  mixins: [navigationBar, page],
  data() {
    return {
      info: {
        images_url: ''
      },
      content: '',
      Focus: false,
      placeholder: '说点什么..',
      commentUser: {},
      KeyboardHeight: 10, // 键盘高度
    }
  },
  onLoad(e) {
    this.getInfo(e.id)
  },
  methods: {
    getInfo(val) {
      getWorkInfo({
        work_id: val
      }).then(res => {
        this.info = res.data
        this.queryInitialization()
      })
    },
    queryInitialization() {
      this.pageNum = 1
      this.queryByPage()
    },
    queryByPage() {
      getCommentList({
        work_id: this.info.id,
        page: this.pageNum,
        page_size: this.pageSize,
      }).then(res => {
        this.handlePaginationResponse(res);
      })
    },
    // 输入框聚焦事件
    inputBindFocus(e) {
      this.KeyboardHeight += e.detail.height - 20
    },
    // 输入框失焦事件
    inputBindBlur() {
      this.Focus = false;
      this.placeholder = '说点什么..'
      this.commentUser = {}
      this.KeyboardHeight = 10
    },
    showInput(val) {
      this.Focus = true;
      this.commentUser = val
      this.placeholder = `回复 ${this.commentUser?.nickname || ''}`
    },
    sendOut() {
      comment({
        work_id: this.info.id,
        pid: this.commentUser?.id || undefined,
        content: this.content
      }).then(res => {
        this.content = ''
        this.placeholder = '说点什么..'
        this.commentUser = {}
        this.queryInitialization()
      })
    },
    giveTheThumbsUp() {
      praise({
        work_id: this.info.id,
      }).then(res => {
        this.getInfo(this.info.id)
      })
    },
    collectMethod() {
      collectWork({
        work_id: this.info.id,
      }).then(res => {
        this.getInfo(this.info.id)
      })
    },
    followFun(val) {
      const subFun = val ? addFollow : deleteFollow
      subFun({
        to_user_id: this.info.user_id
      }).then(res => {
        this.getInfo(this.info.id)
      })
    }
  },
// 滚动到底部时触发加载更多
  onReachBottom() {
    if (this.pageNum < this.allPageNum) {
      this.pageNum++; // 页码加1
      this.loadStatus = 'refresh'; // 显示加载中的状态
      this.queryByPage(); // 加载下一页的数据
    }
  }
}
</script>

<style lang="scss" scoped>
.work_detail {
  & > .work_detail-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #FFFFFF;

    & > .work_detail-nav-main {
      gap: 12px;

      & > .main {
        flex: 1;
        padding-right: 6px;

        & > .left {
          gap: 6px;

          & > .avatar {
            width: 26px;
            height: 26px;
            border-radius: 50%;
          }

          & > .name {
            font-weight: 500;
            font-size: 14px;
            color: #000000;
          }
        }

        & > .right {
          border-radius: 12px;
          border: 1px solid #FE1C41;
          font-weight: 500;
          font-size: 12px;
          color: #FE1C41;
          width: 55px;
          height: 24px;
        }
      }
    }


  }

  & .work_detail-banner {
    width: 100%;
    height: 100vw;
  }

  & > .work_detail-main {
    padding: 12px 14px 88px;

    & > .row_1 {
      gap: 10px;

      & > .left {
        gap: 7px;

        & > .price {
          font-weight: 500;
          font-size: 18px;
          color: #FE1C41;
        }

        & > .day {
          font-weight: 500;
          font-size: 13px;
          color: #000000;
        }
      }

      & > .btn {
        margin: 0;
        padding: 0;
        background-color: #FFFFFF;
        line-height: 0;
        border: none;
        border-radius: 0px;

        & > .icon {
          width: 18px;
          height: 18px;
        }

        &::after {
          border: none;
        }
      }
    }

    & > .row_2 {
      font-weight: bold;
      font-size: 16px;
      color: #000000;
      margin: 16px 0px 8px;
    }

    & > .row_3 {
      font-weight: 500;
      font-size: 13px;
      color: #333333;
    }

    & > .row_4 {
      font-weight: 500;
      font-size: 12px;
      color: #888888;
      padding: 12px 0px;
      border-bottom: 1px solid rgba(112, 112, 112, 0.12);
    }

    & > .row_input {
      padding: 14px 0px;
      gap: 10px;

      & > .avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }

      & > .right {
        flex: 1;
        padding: 8px 12px;
        background: #F5F5F5;
        border-radius: 17px;
        gap: 7px;

        & > .icon {
          width: 14px;
          height: 14px;
        }

        & > .input {
          font-weight: 500;
          font-size: 13px;
        }
      }
    }

    & > .row_input-reply {
      background: #FFFFFF;
      width: calc(100% - 28px);
      padding: 14px;
      left: 0;
      position: fixed;
    }

    & > .row_5 {
      font-weight: 400;
      font-size: 13px;
      color: #585858;
      padding-top: 8px;
    }

    & > .row_list {
      & .detail_comment_base_item {
        & > .body {
          margin: 15px 0px;
          display: flex;
          gap: 10px;

          & > .avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
          }

          & > .right {
            flex: 1;
            gap: 12px;

            & > .nickname {
              font-weight: 500;
              font-size: 14px;
              color: #888888;
              margin-bottom: 2px;
            }

            & > .content {
              font-weight: 500;
              font-size: 14px;
              color: #000000;
            }

            & > .other {
              display: flex;
              gap: 5px;
              font-weight: 500;
              font-size: 12px;

              & > .time {
                color: #888888;
              }

              & > .reply {
                color: #666666;
              }
            }
          }
        }

        & > .son {
          margin-left: 45px;

          & .avatar {
            width: 23px;
            height: 23px;
            border-radius: 50%;
          }
        }
      }
    }

  }

  & > .work_detail-bottom {
    position: fixed;
    width: 100%;
    bottom: 0px;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 14px 14px 30px;
    gap: 20px;

    & > .item_1 {
      display: flex;
      align-items: center;
      gap: 4px;

      & > .icon {
        width: 24px;
        height: 24px;
      }

      & > .num {
        font-weight: bold;
        font-size: 13px;
        color: #000000;
      }
    }

    & > .item_2 {
      width: 38px;
      height: 38px;
    }

    & > .item_3 {
      font-weight: bold;
      font-size: 15px;
      color: #FFFFFF;
      width: 110px;
      height: 38px;
      background: #FE1C41;
      border-radius: 19px;
    }

  }

  & .work_detail-popup {
  }

}
</style>
